<template>
    <div>
        <div class=page-title-section style="background-image:url(images/parallax-5.jpg)">
            <div class=container>
                <div class="center-holder page-title">
                    <h1>项目案例</h1>
                    <p style="color: white;" >
                        鸿创成立至今，开发或者合作过的项目案例。
                    </p>
                </div>
            </div>
        </div>

        <div class="section-block">
            <div class="container">
                <div class="row">
                    <div class="isotope-grid">
                        <div class="col-xs-12 col-sm-6 col-md-4 isotope-item business" v-for="(item,index) in dataSource" :key="index" >
                            <div class="project-item" @click="toProjectDetails(item)" >
                                <div class="overlay-container" style="height: 240px;">
                                    <img alt="project-img" :src="item.img" style="height: 240px;box-shadow: 2px 2px 20px #c5c3c3;" >
                                    <div class="project-item-overlay">
                                        <h4>{{item.title}}</h4>
                                        <p style=" width: 80%; text-overflow: ellipsis;text-align: center;">
                                            {{item.content}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {editProject, getProjectList} from "../../api/base";

    export default {
        name: "Projects",
        data(){
            return{
                dataSource : []
            }
        },
        mounted() {
            this.getDataSource();
        },
        methods:{
            getDataSource: async function () {
                this.dataSource = await getProjectList();
            },
            toProjectDetails : async function (item) {
                let id = item['_id'];
                if(id){
                    //增加阅读量
                    await editProject({id});
                }
                this.$router.push({
                    path : '/projects_details',
                    query : {
                        item : encodeURIComponent(JSON.stringify(item))
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>